

<!-- 我的礼品卡 -->
<template>
	<view class="container">
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="我的礼品卡" colorTheme="black" gotoNavBackCustom="1" @gotoNavBackCustomHandler="gotoNavBackCustomHandler">
			</navHeader>
		</view>
		
		
		<!-- 礼品卡列表 -->
		<view v-if="cardList && cardList.length" class="cardList-Container">
			<view v-for="(item, index) in cardList" :key="index" class="cardItem">
				
				<view class="cardNumber">
					卡号：{{item.cgcCardNumber}}
				</view>
				
				<view class="cardAmount">
					<text class="money-icon">￥</text><text class="money-text">{{item.cgsAmount / 100}}</text>
				</view>
				
				<image class="cardCover" :class="{usedCover: item.cgcBindingUserId}" :src="imgSite + item.cgImage"></image>
				<view v-if="!item.cgcBindingUserId" class="cardStatus">
					
					<view class="status unUse">
						·未使用
					</view>
					
					<view @click="gotoShareOther(index)" class="shareOther-btn">
						赠送好友
					</view>
					<view @click="rechargeToAccount(index)" class="recharge-btn">
						充值到账户
					</view>
				</view>
				<view v-else class="cardStatus">
					
					<view  class="status">
						·已使用
					</view>
					
					<view class="givingRemark">
						{{item.givingRemark}}
					</view>
				</view>
			</view>
		</view>
		<g-empty v-else></g-empty>
	</view>
</template>

<script>
	import {  
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		components: {
			navHeader
		},
		data() {
			return {
				icon: {
				},
				
				//卡包列表
				cardList: []
			}
		},
		computed:{
			...mapState(['hasLogin', 'imgSite']),
		},
		onLoad() {
			this.cardList_fun();
		},
		methods:{
			
			//后退
			gotoNavBackCustomHandler() {
				uni.navigateBack({
					delta: getCurrentPages().length - 2
				});
			},
			
			//礼品卡列表
			cardList_fun() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/GiftCardApi/findGiftCardsByCustomerId',
					method: 'POST',
					success: function(res) {
						that.cardList = res.data.response.results || [];
					}
				});
			},
			
			
			//赠送给好友
			gotoShareOther(index) {

				var that = this;
				uni.navigateTo({
					url: "/pagesAccount/giftCard/shareOther?cardInfo="+JSON.stringify(that.cardList[index])
				});
			},
			
			
			//充值到账户
			rechargeToAccount(index) {
				var that = this;
				uni.showModal({
					content: '礼品卡面值金额将充入账户余额，是否确认充值？',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {
							
							that.$api.globalUtil.requestAjax({
								url: '/GiftCardApi/bind',
								method: 'POST',
								data: {
									cgcPassword: that.cardList[index].cgcPassword
								},
								success: function(res) {
									that.$api.msg('充值成功，余额已增加');
									setTimeout(function() {
										uni.navigateBack({
										});
									}, 2000);
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F5F5F5;
	}
	
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	
	//礼品卡列表
	.cardList-Container {
		padding-top: 20rpx;
		
		.cardItem {
			position: relative;
			margin: 0 auto;
			margin-bottom: 30rpx;
			width:690rpx;
			height:472rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx;
			overflow: hidden;
			
			//卡号
			.cardNumber {
				z-index: 99;
				position: absolute;
				top: 40rpx;
				left: 30rpx;
				font-size:22rpx;
				font-family:PingFang SC;
				// font-weight:500;
				color:rgba(255,255,255,1);
				text-shadow:0px 1px 2px rgba(0, 0, 0, 0.78);
			}
			
			//金额
			.cardAmount {
				z-index: 99;
				position: absolute;
				right: 0;
				top: 295rpx;
				padding-left: 20rpx;
				width:146rpx;
				height:56rpx;
				line-height: 56rpx;
				font-size:24rpx;
				font-family:PingFang SC;
				color:rgba(255,255,255,1);
				text-shadow:0px 2px 3px rgba(119,119,119,1);
				background:rgba(0,0,0,0.5);
				border-radius:8rpx 0px 0px 8rpx;
				
				.money-icon {
					font-size: 24rpx;
				}
				.money-text {
					font-size: 40rpx;
				}
			}
			
			.cardCover {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 378rpx;
				
				&.usedCover {
					background:rgba(0,0,0,0.3);
				}
			}
			
			.cardStatus {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				bottom: 0;
				left: 0;
				padding: 0 20rpx 0 40rpx;
				width: 100%;
				height: 94rpx;
				background:rgba(255,255,255,1);

				.status {
					font-size:26rpx;
					font-family:PingFang SC;
					color: #333333;
					
					&.unUse {
						color: #E01228;
					}
				}
				
				.givingRemark {
					margin-right: 20rpx;
					font-size:26rpx;
					font-family:PingFang SC;
					color:rgba(102,102,102,1);
				}
				
				
				// 赠送好友
				.shareOther-btn {
					margin-left: auto;
					margin-right: 46rpx;
					width:146rpx;
					height:52rpx;
					line-height: 52rpx;
					text-align: center;
					font-size:22rpx;
					font-family:PingFang SC;
					color:rgba(255,255,255,1);
					background:linear-gradient(-45deg,rgba(255,126,0,1) 0%,rgba(255,156,0,1) 100%);
					border-radius:26rpx;
				}
				
				// 充值到账户
				.recharge-btn {
					width:146rpx;
					height:52rpx;
					line-height: 52rpx;
					text-align: center;
					font-size:22rpx;
					font-family:PingFang SC;
					color:rgba(255,255,255,1);
					background:linear-gradient(135deg,rgba(224,19,39,1) 0%,rgba(209,4,152,1) 100%);
					border-radius:26rpx;
				}
			}
		}
	}
</style>



